<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
    function validateForm()
    {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var firstname = document.getElementById("firstname").value;
        var lastname = document.getElementById("lastname").value;
        var country = document.getElementById("country").value;
        var city = document.getElementById("city").value;
        var state = document.getElementById("state").value;
        var street = document.getElementById("street").value;
        var homephone = document.getElementById("homephone").value;
        var mobile = document.getElementById("mobile").value;
        var typecard = document.getElementById("typecard").value;
        var cardexpiry = document.getElementById("cardexpiry").value;
        var email = document.getElementById("email").value;
        var numbers = /^[0-9]+$/;
        if (username == null || username.length <6 ||username.length >20)
        {
            document.getElementById("messageuser").innerHTML="username is not empty/ between 6 and 20 charater";
            return false;
        }
        else
        {
            document.getElementById("messageuser").innerHTML=""; 
           
        }
        if(password == null || password.length <6 ||password.length >20)
        {
            document.getElementById("messagepass").innerHTML="password is not empty/ between 6 and 20 charater";    
            return false;
        }
        else
        {
            document.getElementById("messagepass").innerHTML="";
            
        }
        if (firstname==null || firstname=="")
        {
            document.getElementById("messagefirst").innerHTML="firstname is not empty";
            return false;
         
        }else
        {
            document.getElementById("messagefirst").innerHTML="";
            
        }
        if(lastname == null || lastname =="")
        {
            document.getElementById("messagelast").innerHTML="lastname is not empty";
            return false;
               
        }else
        {
            document.getElementById("messagelast").innerHTML="";
            
        }
        if(country == null || country =="")
        {
            document.getElementById("messagecountry").innerHTML="country is not empty";
            return false;
               
        }else
        {
            document.getElementById("messagecountry").innerHTML="";
            
        }
        if (city==null || city=="")
        {
            document.getElementById("messagecity").innerHTML="city is not empty";
            return false;
        }else
        {
            document.getElementById("messagecity").innerHTML="";
            
        }
        if(state == null || state =="")
        {
            document.getElementById("messagestate").innerHTML="State or provine is not empty";
            return false;
               
        }else
        {
            document.getElementById("messagestate").innerHTML="";
            
        }
        if(street == null || street =="")
        {
            document.getElementById("messagestreet").innerHTML="street is not empty";
            return false;
               
        }else
        {
            document.getElementById("messagestreet").innerHTML="";
            
        }
        if(homephone.length < 10 || homephone.length > 12)
        {
            document.getElementById("messagephone").innerHTML="homephone is not empty/ between 10 and 12 number"; 
            return false;
        }
        else
        {      
            document.getElementById("messagephone").innerHTML="";  
        }
        if(mobile == null || mobile.length < 10 || mobile.length > 12)
        {
            document.getElementById("messagemobile").innerHTML="mobile is not empty/ between 10 and 12 number"; 
            return false;
        }
        else
        {      
            document.getElementById("messagemobile").innerHTML="";  
        }
        if(typecard== null|| typecard.length < 10 || typecard.length > 12)
        {
            document.getElementById("messagetype").innerHTML="typecard is not empty/ between 10 and 12 number"; 
            return false;
        }
        else
        {      
            document.getElementById("messagetype").innerHTML="";  
        }
        if(typecard== null|| typecard.length < 10 || typecard.length > 12)
        {
            document.getElementById("messagetype").innerHTML="typecard is not empty/ between 10 and 12 number"; 
            return false;
        }
        else
        {      
            document.getElementById("messagetype").innerHTML="";  
        }
        return true;
       
    }
</script>

<div class="tab_container">
    <div id="tab2" class="tab_content" style="display: block;">
        <h2>Add new Account</h2>

        <p>
            Enter information to create a new account.

        </p>
        <p class="message1">
            <%
                String message = request.getAttribute("message1") == null ? "" : request.getAttribute("message1").toString();
                out.println(message);
            %>

        </p>
        <form onsubmit="return validateForm()"  action="<c:url value="<%= "/admin/account/create/"%>" />" method="POST" name="register" >

            <p>
                <label>Username:  </label><br/>
                <input type="text" id="username" class="text small" name="username"> 
                <span id="messageuser" class="valid">*</span>
            </p>

            <p>
                <label>password:  </label><br/>
                <input type="password" id="password" class="text small required" name="password"> 
                <span id="messagepass" class="valid">*</span>
            </p>
            <p>
                <label >firstname: </label><br/>
                <input type="text" id="firstname" class="text small" name="firstname"> 
                <span id="messagefirst" class="valid">*</span>

            </p>
            <p>
                <label >lastname:  </label><br/>
                <input type="text" id="lastname" class="text small" name="lastname"> 
                <span id="messagelast" class="valid">*</span>
            </p>
            <p>
                <label >country      </label><br/>
                <input type="text" id="country" class="text small" name="country"> 
                <span id="messagecountry" class="valid">*</span>
            </p>
            <p>
                <label >city:      </label><br/>
                <input type="text" id="city" class="text small" name="city"> 
                <span id="messagecity" class="valid">*</span>
            </p>
            <p>
                <label >state province:      </label><br/>
                <input type="text" id="state" class="text small" name="state_province"> 
                <span id="messagestate" class="valid">*</span>
            </p>
            <p>
                <label >street      </label><br/>
                <input type="text" id="street" class="text small" name="street"> 
                <span id="messagestreet" class="valid">*</span>
            </p>
            <p>
                <label>homephone:  </label><br/>
                <input type="text" id="homephone" class="text small" name="homephone"> 
                <span id="messagephone" class="valid">*</span>
            </p>
            <p>
                <label>mobile:    </label><br/>
                <input type="text" id="mobile" class="text small" name="mobile"> 
                <span id="messagemobile" class="valid">*</span>
            </p>
            <p>
                <label >typecard:      </label><br/>
                <input type="text" id="typecard" class="text small" name="typecard"> 
                <span id="messagetype" class="valid">*</span>
            </p>
            <p>
                <label>cardnumber:  </label><br/>
                <input type="text" id="cardnumber" class="text small" name="cardnumber"> 
                <span id="messagenumber" class="valid">*</span>
            </p>
            <p>
                <label>cardexpiry:      </label><br/>
                <input type="text" id="cardexpiry" class="text small" name="cardexpiry"> 
                <span id="messageexpiry" class="valid">*</span>
            </p>

            <p>
                <label>email: </label><br/>
                <input type="text" id="email" class="text small" name="email"> 
                <span id="messageemail" class="valid">*</span>
            </p>
            <p>	
                <input checked="checked" type="radio" name="role" id="RADIO1" value="2">
                <label for="role">User</label>
                <input type="radio" name="role" id="RADIO2" value="1">
                <label for="role">Admin</label>
            </p>
            <p>
                <input type="submit" class="submit" value="Submit">
            </p>

        </form>
    </div>
</div>
